<template>
    <div class="full-calendar-header">
        <div class="header-left">
            <slot name="header-left"></slot>
            <!--<button class="prev-month btn" @click.stop="goPrev">{{leftArrow}}</button>-->
            <!--<button class="next-month btn" @click.stop="goNext">{{rightArrow}}</button>-->
        </div>
        <div class="header-center">
            <span class="prev-month" @click.stop="goPrev">{{leftArrow}}</span>
            <span class="title">{{title}}</span>
            <span class="next-month" @click.stop="goNext">{{rightArrow}}</span>
        </div>
        <div class="header-right">
            <slot name="header-right"></slot>
        </div>
    </div>
</template>
<script>
    // import moment from 'moment';
    export default {
        props: {
            currentMonth: {},
            titleFormat: {},
            firstDay: {},
            monthNames: {},
            locale: {}
        },
        data() {
            return {
                leftArrow: '<',
                rightArrow: '>'
            }
        },
        computed: {
            title() {
                if (!this.currentMonth) return;
                return this.currentMonth.format('YYYY-MM')
            }
        },
        methods: {
            goPrev() {
                let newMonth = moment(this.currentMonth).subtract(1, 'months').startOf('month');
                this.$emit('change', newMonth);
            },
            goNext() {
                let newMonth = moment(this.currentMonth).add(1, 'months').startOf('month');
                this.$emit('change', newMonth);
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .full-calendar-header
        display: flex;
        align-items: center;
        .header-left, .header-right
            flex: 1;
            font-size :0;
            .prev-month, .next-month
                cursor: pointer;
                display : inline-block;
                padding : 5px 10px;
                font-size : 20px;
                background-color : #fff;
                border : 1px solid #000;
            .prev-month
                border-top-left-radius : 5px;
                border-bottom-left-radius : 5px;
            .next-month
                border-top-right-radius : 5px;
                border-bottom-right-radius : 5px;
        .header-center
            flex: 3;
            text-align: center;
            .title
                margin: 0 10px;
            .prev-month, .next-month
                cursor: pointer;


</style>
